<template>
	<div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<!-- <el-form-item prop="mailCategory" label="类型">
				<el-radio-group v-model="form.mailCategory">
					<el-radio v-for="item in mail_category" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-form-item> -->
			<el-form-item prop="recipientIdList" label="收件人">
				<el-checkbox-group v-model="form.recipientIdList">
					<el-checkbox v-for="item in listPerson" :key="item.userId" :label="item.userId">{{ item.nickName }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item prop="mailTitle" label="邮件标题">
				<el-input v-model="form.mailTitle" style="width: 50%" placeholder="请输入邮件标题" />
			</el-form-item>
			<el-form-item label="文件上传">
				<el-upload
					v-model:file-list="mailUrlList"
					:action="fileUrl"
					multiple
					ref="upload"
					:headers="token"
					name="files"
					:on-success="handleSuccess"
					:on-remove="handleRemove"
					style="width: 340px">
					<el-button type="primary">上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item prop="mailContent" label="内容" style="height: 300px">
				<Edit v-model:modelValue="form.mailContent" style="height: 250px" />
			</el-form-item>
			<el-form-item prop="mailStatus" label="选项">
				<el-radio-group v-model="form.mailStatus">
					<el-radio label="2">不发送，保存为草稿</el-radio>
					<el-radio label="1">直接发送</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import { reactive, toRefs, watch } from 'vue'
import Edit from '@/components/Editor/index'
const { proxy } = getCurrentInstance()
const { mail_category } = proxy.useDict('mail_category')
import { addMail, getPersons } from '@/api/email/email'
import useTagsViewStore from '@/store/modules/tagsView'
import { getConfigKey } from '@/api/system/config'
import { getToken } from '@/utils/auth'
const tagsView = useTagsViewStore()
const router = useRouter()
const baseform = ref()
const fileUrl = ref('')
const pre = ref('')
getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
})

const token = { Authorization: 'Bearer ' + getToken() }
const form = reactive({
	mailCategory: '5',
	recipientIdList: [],
	mailContent: '',
	mailStatus: '',
	mailTitle: '',
	filePaths: []
})

const rules = {
	mailCategory: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
	recipientIdList: [{ required: true, message: '收件人不能为空', trigger: 'blur' }],
	mailContent: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	mailTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
	mailStatus: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
}

const listPerson = ref([])
getPersons().then((res) => {
	listPerson.value = res
})
const mailUrlList = ref([])
const handleSuccess = () => {
	form.mailUrlList = mailUrlList.value.map((e) => {
		if (e && e.response) {
			return e.response.data[0]
		}
	})
}
const handleRemove = () => {
	form.mailUrlList = mailUrlList.value.map((e) => {
		if (e && e.response) {
			return e.response.data[0]
		}
	})
}
const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			addMail(form).then((res) => {
				proxy.$modal.msgSuccess('新增成功！')
				setTimeout(() => {
					router.go(0)
				}, 500)
			})
		}
	})
}

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
:deep(.is-active) {
	background-color: #409eff !important;
}
</style>
